import Styles from '@/pages/BatteryHealthEvaluate/SaveEvaluate/components/Styles.less';
import { useIntl } from '@umijs/max';
import { Col, Popover, Row, Space } from 'antd';
import React from 'react';
import { getRealValue } from './tools';

type IProps = {
  stackData: API.StackSafetyWorkIndicators;
};
const Stack: React.FC<IProps> = (props) => {
  const intl = useIntl();
  const { stackData } = props;
  return (
    <div style={{ width: '100%' }}>
      <div className={Styles.textTitle}>
        <Row gutter={16} style={{ width: '100%' }}>
          <Col span={8}>{intl.formatMessage({ id: 'batteryVoltage.safe.technicalIndex' })}</Col>
          <Col span={8}>{intl.formatMessage({ id: 'batteryVoltage.safe.efficiency' })}</Col>
          <Col span={8}>{intl.formatMessage({ id: 'batteryVoltage.safe.reliability' })}</Col>
        </Row>
      </div>
      <div className={Styles.textContent}>
        <Row gutter={16} style={{ width: '100%', marginTop: '10px' }}>
          <Col span={8}>
            <Space direction="vertical">
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s1' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.chargeCapacity' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>{getRealValue(stackData?.stackAllInenergy)}</span>
                  <span>MWh</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s2' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.dischargeCapacity' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>
                    {getRealValue(stackData?.stackAllOutenergy)}
                  </span>
                  <span>MWh</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s3' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.stackHours' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>
                    {getRealValue(stackData?.stackWorkingHours)}
                  </span>
                  <span>h</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s4' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.stackEquivalent' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>
                    {getRealValue(stackData?.stackCoefficientStation)}
                  </span>
                  <span>%</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s5' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.stackFrequency' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>
                    {getRealValue(stackData?.stackEquivalentDischargeTimes)}
                  </span>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.times' })}</span>
                </Space>
              </Popover>
              {/*<Popover content={'电池堆累计调频耗电量，仅调频储能电站统计'}>*/}
              {/*  <Space>*/}
              {/*    <span>电池堆调频里程</span>*/}
              {/*    <span>=</span>*/}
              {/*    <span className={Styles.values}>{getRealValue(stackData?.stackAgcEnergy)}</span>*/}
              {/*    <span>MW</span>*/}
              {/*  </Space>*/}
              {/*</Popover>*/}
            </Space>
          </Col>
          <Col span={8}>
            <Space direction="vertical">
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s6' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.stackLose' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>{getRealValue(stackData?.stackLossRate)}</span>
                  <span>%</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s7' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.stackConversion' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>
                    {getRealValue(stackData?.stackConversionEfficiency)}
                  </span>
                  <span>%</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s8' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.energyToSoh' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>{getRealValue(stackData?.stackSohValue)}</span>
                  <span>%</span>
                </Space>
              </Popover>
            </Space>
          </Col>
          <Col span={8}>
            <Space direction="vertical">
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s9' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.stackAvailability' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>
                    {getRealValue(stackData?.stackAvailabilityFactor)}
                  </span>
                  <span>%</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s10' })}>
                <Space>
                  <span>{intl.formatMessage({ id: 'batteryVoltage.safe.stackUtilization' })}</span>
                  <span>=</span>
                  <span className={Styles.values}>
                    {getRealValue(stackData?.stackUtilizationCoefficient)}
                  </span>
                  <span>%</span>
                </Space>
              </Popover>
              <Popover content={intl.formatMessage({ id: 'batteryVoltage.safe.s11' })}>
                <Space>
                  <span>
                    {intl.formatMessage({ id: 'batteryVoltage.safe.batteryFailureRate' })}
                  </span>
                  <span>=</span>
                  <span className={Styles.values}>{getRealValue(stackData?.stackFailureRate)}</span>
                  <span>%</span>
                </Space>
              </Popover>
            </Space>
          </Col>
        </Row>
      </div>
    </div>
  );
};

export default Stack;
